<!doctype html>
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<html>
<f:view>
<f:loadBundle var="messages" basename="messages"></f:loadBundle>
<head>
<meta charset="utf-8">
<title><h:outputText value="#{messages['system_title']}" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- styles -->
    <link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/custom.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/themes/default/default.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/code/prettify.css" />
    <script src="<%=request.getContextPath()%>/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/amcharts/pie.js" type="text/javascript"></script>
    
    <script src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
    <!--[if lt IE 9]>
      <script src="../js/html5.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
	<script>
		var chart;
	
	    var chartData = [
	        {
	            "country": "United States",
	            "visits": 9252
	        },
	        {
	            "country": "China",
	            "visits": 1882
	        },
	        {
	            "country": "Japan",
	            "visits": 1809
	        },
	        {
	            "country": "Germany",
	            "visits": 1322
	        },
	        {
	            "country": "United Kingdom",
	            "visits": 1122
	        },
	        {
	            "country": "France",
	            "visits": 1114
	        },
	        {
	            "country": "India",
	            "visits": 984
	        },
	        {
	            "country": "Spain",
	            "visits": 711
	        }
	    ];
	
	
	    
	    
	    
	    function loadRoleProportion(){
	    	$.ajax({
				type : "get",
				url : "loadRoleProportion.do" ,
				cache : false,
				async : false,
				dataType: "text",
				success : function(data) {
					if(data != ''){
						AmCharts.ready(function () {
					        // PIE CHART
					        chartData = eval("(" + data + ")");
							chart = new AmCharts.AmPieChart();
							
					        // title of the chart
					        chart.addTitle("角色比例", 16);
					
					        chart.dataProvider = chartData;
					        chart.titleField = "country";
					        chart.valueField = "visits";
					        chart.sequencedAnimation = true;
					        chart.startEffect = "elastic";
					        chart.innerRadius = "30%";
					        chart.startDuration = 2;
					        chart.labelRadius = 15;
					        chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
					        // the following two lines makes the chart 3D
					        chart.depth3D = 10;
					        chart.angle = 15;
					
					        // WRITE                                 
					        chart.write("chartdiv");
					    });
					}
				}
			});
	    }
	    
	    
	    $(function(){
	    	loadRoleProportion();
		});
	</script>
	
	
</head>
<body class="bg-white" >
<h:form>
	<div class="content">
			<div class="row page-head">
				<h3 class="page-title">
					<i class="n-icon-laptop n-icon-black"></i>
					<h:outputText value="#{messages['label_view_list']}"/>
				</h3>
			</div>

			<div style="margin-left: auto;margin-right: auto;">
				<div class="span12">
					<div class="span6">
						<div id="chartdiv" style="width:600px; height:400px;"></div>
					</div>
					<div class="span6">
					
					</div>
				</div>
			</div>
	</div>		
	
</h:form>
</body>
</f:view>
</html>